@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2*1px;
}

html,
body {
    width: 100%;
    height: 100%;
}
body {
    background: url(../img/check-bg1.png)no-repeat;
    background-size: cover;
}
.webM{
    overflow: hidden;
    .logo{
        width: p(105);
        height: p(40);
        margin: p(45) 0 0 p(45);
        img{
            width: 100%;
        }
    }
    .toux{
        width: p(174);
        height: p(174);
        margin: 0 auto;
        margin-top: p(38);
        img{
            width: 100%;
        }
    }
    .pin{
        width: p(395);
        height: p(53);
        background: url(../img/check-skyblue.png);
        background-size:cover ;
        margin: 0 auto;
        margin-top: p(26);
        img{
            width: p(309);
            height: p(26);
            margin-top:p(15) ;
        }
    }
    .jiqi{
        width: p(260);
        height: p(25);
        margin: 0 auto;
        margin-top: p(18);
        img{
            width: 100%;
        }
    }
    .baqi{
        width: p(486);
        margin: 0 auto;
        margin-top: p(20);
       >div{
            display: inline-block;
        }
        div:nth-child(1){
            width: p(60);
            height: p(60);
            vertical-align: middle;
            img{
                width: 100%;
            }
        }
        div:nth-child(2){
            vertical-align: middle;
            width: p(405);
            height: p(43);
            background: url(../img/check-pink.png);
            background-size:cover ;
            img{
                width:p(318) ;
                height:p(27) ;
                margin: p(10) 0 0 p(15);
            }
        }
    }
    .sao{
        width: p(340);
        height: p(84);
        margin: 0 auto;
        margin-top: p(46);
        img{
            width: 100%;
        }
    }
    .guz{
        position: absolute;
        bottom:0;
        height: p(70);
        width: 100%;
        background: #2c2c2c;
        line-height: p(70);
        text-align: center;
        >img:nth-child(1){
            width: p(420);
            height: p(20);
            vertical-align: middle;
            margin: 0 p(20);
        }
        label >img:nth-child(1){
            width: p(106);
            height: p(45);
           vertical-align: middle;
        }
        img:nth-child(3){
            width: p(38);
            height: p(30);
            vertical-align: middle;
        }
    }
    #guzhu{
    font-size: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
}
#guzhu:checked~ .guzhu{
    width: 100%;
     background: rgba(0, 0, 0, .9);
    /*transform: translate(0%);*/
}
    .guzhu{
        width: 0;
        height: 100%;
        position: fixed;
        top: 0;
        overflow: hidden;
        background: black;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        div:nth-child(1){
            width: p(312);
            height: p(312);
            img{
                width: 100%;
            }
        }
         div:nth-child(2){
             width: p(335);
             height: p(85);
             margin-top:p(20) ;
             img{
                 width: 100%;
             }
         }
      }
}
